import './TemplateA01.scss'

import { useRequest } from 'alova/client'
import { useEffect, useState } from 'react'

import { Http } from '../Utils/Api'
import { getNestedValue } from '../Utils'

import { ICONMapping } from '../Config/IconMapping'


const list = [
    { key: 1, label: '模拟字段1', value: 111, icon: 'kejipeixun' },
    { key: 2, label: '模拟字段2', value: 222, icon: 'kejipeixun' },
    { key: 3, label: '模拟字段3', value: 333, icon: 'kejipeixun' },
    { key: 4, label: '模拟字段4', value: 444, icon: 'kejipeixun' },
]

const backDefaultStyle = {
    background: '#fff',
    boxShadow: `var(--shadow-1-down)`,
    borderRadius: '8px',
    padding: '8px',
    margin: '8px',
    height: 'calc(100% - 16px)'
}

const labelDefaultStyle = {
    fontFamily: 'ShuHeiTi',
    fontWeight: 600,
    fontSize: 20,
    color: '#262626',
}

const valueDefaultStyle = {
    fontFamily: 'DIN',
    fontWeight: 600,
    fontSize: 24,
    color: '#262626',
}

const iconDefaultStyle = {
    color: '#262626',
    fontSize: 30,
}

const TemplateA01 = ({ params }) => {
    const { send } = useRequest(data => Http(data), { immediate: false })
    const [Data, setData] = useState()
    useEffect(() => {
        if (params?.apiUrl) {
            const { method, apiUrl, hierarchy } = params
            send({ method, url: apiUrl }).then(res => {
                const data = getNestedValue(hierarchy, res)
                setData(data)
            })
        }
    }, [params])


    return (
        <div className='TemplateA01'>
            {Data ?
                (() => {
                    const backStyle = {
                        background: params.backColor,
                        boxShadow: `var(${params.backShadow})`,
                        borderRadius: params.backRadius,
                        padding: params.backPadding,
                        margin: params.backMargin,
                        height: `calc(100% - ${params.backMargin * 2}px)`
                    }
                    const labelStyle = {
                        fontFamily: params.textFamily,
                        fontWeight: params.textWeight,
                        fontStyle: params.textStyle,
                        fontSize: params.textSize,
                        color: params.textColor,
                        filter: `drop-shadow(${params.textShadowX}px ${params.textShadowY}px ${params.textShadowS}px ${params.textShadowB})`
                    }
                    const valueStyle = {
                        fontFamily: params.valueFamily,
                        fontWeight: params.valueWeight,
                        fontStyle: params.valueStyle,
                        fontSize: params.valueSize,
                        color: params.valueColor,
                        filter: `drop-shadow(${params.valueShadowX}px ${params.valueShadowY}px ${params.valueShadowS}px ${params.valueShadowB})`
                    }
                    const iconStyle = {
                        fontSize: params.iconSize,
                        color: params.iconColor,
                        filter: `drop-shadow(${params.iconShadowX}px ${params.iconShadowY}px ${params.iconShadowS}px ${params.iconShadowB})`
                    }
                    return params.dataArr.map(({ key, label, image, files, icon }) =>
                        <div key={key} style={backStyle}>
                            <div>
                                <div style={labelStyle}>{label}</div>
                                <div style={valueStyle}>{Data[key]}</div>
                            </div>
                            <span style={iconStyle}>
                                {image === 'icon' ?
                                    ICONMapping[icon] :
                                    <img src={files} alt='img' width={params.iconSize} height={params.iconSize} />
                                }
                            </span>
                        </div>
                    )
                })() :
                list.map(({ key, label, value, icon }) =>
                    <div key={key} style={backDefaultStyle}>
                        <div>
                            <div style={labelDefaultStyle}>{label}</div>
                            <div style={valueDefaultStyle}>{value}</div>
                        </div>
                        <span style={iconDefaultStyle}>{ICONMapping[icon]}</span>
                    </div>
                )
            }
        </div>
    )
}

export default TemplateA01;